<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
	<link href="css/bootstrap.min.css"/ rel="stylesheet">
    <script src="vue.js" type="text/javascript"></script>
</head>
<body>
<!--标题-->
<div class="jumbotron text-center">
    <h1>在线试题测试</h1>
    <p>通过回答下面的题,有多选题和单选题，来检测您的知识！</p>
    <p>现在就开始吧-></p>
</div>

<div id="app" class="container">
<!--    进度条-->
    <div class="progress">
    <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="25"
         aria-valuemin="0" aria-valuemax="100" v-bind:style="{width:(progress*100/total.length)+'%'}">
            完成进度
    </div>
    </div>
<!--题目-->
    <div class="jumbotron text-center">
        <div class="container" v-if="progress!=total.length">
            <h3>{{total[progress].title}}</h3>
			<hr>
			<div v-for="index in total[progress].items">
				<label>
					<input type="radio" name="item" v-model="answer" v-bind:value="itemvalues[index]"/>
					<span>{{index}}</span>
				</label>
			</div>
			<div class="row">
				<div class="col-lg-6 col-xm-12">
					<button @click="prev()" type="button" class="btn btn-default btn-block"
					>上一题</button>
				</div>
				<div class="col-lg-6 col-xm-12">
					<button @click="next()" type="button" class="btn btn-default btn-block"
					v-if="answer===''" disabled>下一题</button>
					<button @click="next()" type="button" class="btn btn-default btn-block"
					v-else>下一题</button>
				</div>
			</div>
			<!-- <div>
				<h5>{{total[progress].items[0]}}</h5>
				<h5>{{total[progress].items[1]}}</h5>
				<h5>{{total[progress].items[2]}}</h5>
				<h5>{{total[progress].items[3]}}</h5>
			</div> -->
		</div>
		<div v-else disabled class="row">
			<h4>答题完成</h4>
		</div>
    </div>

<!--选择-->
<!--上一题-->
<!--下一题-->
</div>
<!--前进后退-->
</body>
    <script>
       let App = new Vue({
        el:'#app',
        data:{
            total:[{
                title:"一",
                items:['1','b','c','d'],
                daAn:"A"
            },{
                title:"二",
                items:['a','b','c','d'],
                daAn:"B"
            },{
                title:"三",
                items:['a','b','c','d'],
                daAn:"C"
            },{
                title:"四",
                items:['a','b','c','d'],
                daAn:"D"
            },{
                title:"五",
                items:['a','b','c','d'],
                daAn:"B"
            }],
            progress:0,
            itemvalues:["A","B","C","D"],
            answer:'',
            answers:new Map(),
            submit:false,
            score:0,
			dis:false
        },
        methods:{
            // 上一题
            prev:function(){
				if(this.progress >0){
					this.progress--
					this.answer = this.answers.get(this.progress)
				}
            },
            // 下一题
            next: function () {
				this.answers.set(this.progress,this.answer)
				if(this.answer==this.total[this.progress].daAn){
					this.score = this.score+ 20
				}
				this.progress++
				this.answer=''
				console.log(this.answers);
            },
            //提交
            submmit:function () {

            },
            //返回

        }

    })
</script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>

</html>